<template>
  <div style="margin-bottom:0.5rem; margin-top:0.88rem;">
    <div class="release">
      <div class="release_head">
        <img src="../assets/asd.jpg" />
      </div>
      <div class="release_main">
        <div>
          <span>哈尔的移动城堡</span>
          <img src="../assets/zxc.png" />
          <!-- 请求数据时记得加判断 这张图片是否有 -->
        </div>
        <p>观众评:8.6</p>
        <p>主演:道恩钱森,杰森斯坦森,以德瑞恩</p>
        <p>今天264家影院放映5008场</p>
      </div>
      <div class="btn">
        <span>预售</span>
      </div>
    </div>
    <div class="hr"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style scoped>
.release {
  display: flex;
  padding: 0.1rem var(--space);
}

.release .release_head img {
  height: 0.9rem;
}

.release .release_main {
  flex: 1;
  padding: 0.08rem;
}

.release .release_main div span {
  font-size: 0.18rem;
  font-weight: bold;
  width: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.release .release_main div img {
  float: right;
}

.release .release_main p {
  padding: 0.03rem 0;
  box-sizing: border-box;
  color: #666;
}

.release .release_main p:nth-of-type(2) {
  width: 2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.release .btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
.release .btn span {
  background: rgb(60, 159, 230);
  padding: 0.08rem;
  border-radius: 0.05rem;
  color: white;
}

.hr{
    height:0.01rem;
    background: rgb(247,247,247);
    margin:0 var(--space);
}
</style>